@import "./variables";
@import "./mixins";

html {
  font-size: 62.5%;
  line-height: 1.5;
  color: #383838;
}

body {
  font-size: inherit;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0;
}

[hidden] {
  display: none !important;
}

/* Wait for dynamic page content */

.waitingForJs {
  overflow: hidden;
}

.waitingForJs > * {
  opacity: 0;
}

.waitingForJsMessageContainer {
  display: none;
}

.waitingForJs .waitingForJsMessageContainer {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  opacity: initial;
}

/* Generic */

* {
  position: relative;
}

.pwVisuallyHidden {
  position: absolute !important;
  height: .1rem;
  width: .1rem;
  overflow: hidden;
  clip: rect( .1rem, .1rem, .1rem, .1rem );
}

.pwText {
  @mixin text;
  line-height: 1.2;
  margin: 0 0 1em;
}

.pwCta {
  @mixin cta;
}

.pwTextualCta {
  @mixin textualCta;
}

label[data-i18n-tooltip]::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2.6rem;
  margin: auto;
  width: 2.6rem;
  height: 100%;
  background: url( /shared/images/info-icon.svg ) center center / 1.6rem no-repeat;
}

/* Form */

.pwFormGroup {
  margin: 0 0 2rem;
  padding: .5rem 1.5rem;
  border: .1rem solid #ddd;
}

.pwFormGroupCaption {
  @mixin caption;
  position: sticky;
  z-index: 1;
  top: 0;
  margin: 0 0 1rem;
  padding: 1rem;
  background-color: #fff;
  font-weight: 500;
}

.pwFormGroupCaptionLink {
  @mixin link;
  color: inherit;
}

.pwFormRow {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: $formRowSpaceFromContent;
}

.pwFormRow .pwFormRow {
  flex-basis: 100%;
  margin-top: $formRowSpaceFromContent;
  margin-bottom: 0;
}

.pwFormRowText {
  @mixin text;
}

.pwInput,
.pwSelect {
  @mixin text;
  -webkit-appearance: none;
  font-family: inherit;
  line-height: 2.5;
  margin: 0 .1rem 0 0;
  padding-bottom: .1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  background-image: linear-gradient( #ededed, #ededed 38%, #dedede );
  background-position: right center;
  background-repeat: no-repeat;
  border: .1rem solid rgba( 0, 0, 0, .25 );
  border-image: initial;
  border-radius: .2rem;
  box-shadow: rgba( 0, 0, 0, .08 ) 0 .1rem 0, rgba( 255, 255, 255, .75 ) 0 .1rem .2rem inset;
  color: #444;
  text-shadow: #f0f0f0 0 .1rem 0;
  user-select: none;
}

.pwInput[type="number"] {
  padding-right: 0;
}

.pwSelect {
  padding-right: 2.5rem;
  background-image: $dropdownArrowImage, linear-gradient( #ededed, #ededed 38%, #dedede );
  background-image: -webkit-image-set( $dropdownArrowImage 1x, $dropdownArrowImage2x 2x ), linear-gradient( #ededed, #ededed 38%, #dedede );
  background-image: image-set( $dropdownArrowImage 1x, $dropdownArrowImage2x 2x ), linear-gradient( #ededed, #ededed 38%, #dedede );
}

.pwFormControls {
  position: sticky;
  z-index: 1;
  bottom: 0;
  padding: 2rem 1.6rem;
  background-color: #fff;
}
